
    let ctx = document.getElementById("canvas").getContext('2d');

    //绘制形状中的小方格
    function draw_rect(x, y) {
        ctx.fillStyle="red";
        ctx.strokeStyle="black";
        ctx.lineWidth=1;
        ctx.fillRect(x,y,10,10);
        ctx.strokeRect(x,y,10,10);
    }

    function debug(x, y) {
        console.log("point: ", `(${x}, ${y})`);
    }

    function js_debug() {
        console.log("XXXXXXXXXXXXXXXX");
    }

    function clear(x, y) {
        //ctx.fillStyle = "red";
        //ctx.fillRect(x, y, 10, 10);
        ctx.clearRect(x-1, y-1, 12, 12);
    }

    for(let i = 0; i< 10; ++i) {

        if ( i != 0) {
            clear(0 * 10,  0 * 10);
            clear(1 * 10,  0 * 10);
            clear(1 * 10,  (i - 1 + 1) * 10);
            clear(1 * 10,  (i - 1 + 2) * 10);
        }


        draw_rect(0 * 10,  0 * 10);
        draw_rect(1 * 10,  0 * 10);
        draw_rect(1 * 10,  (i + 1) * 10);
        draw_rect(1 * 10,  (i + 2) * 10);

    }